<script setup lang="ts">
/* 什么是pinia
*pinia是Vue最新的 状态管理工具，是Vuex的替代品
*相比于Vuex pinia做了以下改进
*
* 1.提供更简单的API --去掉了mutations
* 2.提供符合 组合式API的风格 -- 和Vue3的新语法统一
* 3.去掉了modules的概念 每个store都是单独的模块
* 4.配合TS更友好 提供可靠的类型推断
* */

import { useCounterStore } from '@/stores/counter.ts'
// 跟Vuex的特点一样 我们在任何组件都可以拿到仓库的数据 使用方法也是没有任何的变化
// 依旧使用一个变量来接收 将来使用这个变量
const CounterStore = useCounterStore()
</script>

<template>
  <!--  修改App.vue中的数字-->
  <div>学习Vue3状态管理工具-- pinia -- {{ CounterStore.count }} -- {{ CounterStore.msg }}
    <button @click="CounterStore.subCount()">-</button>
    <button @click="CounterStore.setMsg">修改文字</button>
  </div>
</template>

<style scoped>

</style>
